// components/avatar-display/avatar-display.js
import { AvatarConfig, DEFAULT_AVATAR_CONFIG } from '../../utils/avatar-models.js';

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 头像配置数据
    avatarConfig: {
      type: Object,
      value: {},
      observer: 'onAvatarConfigChange'
    },
    // 头像尺寸
    size: {
      type: String,
      value: 'medium', // small, medium, large, xlarge
      observer: 'onSizeChange'
    },
    // 是否可交互
    interactive: {
      type: Boolean,
      value: false
    },
    // 是否显示边框
    showBorder: {
      type: Boolean,
      value: false
    },
    // 是否显示调试信息
    showDebugInfo: {
      type: Boolean,
      value: false
    },
    // 是否启用加载状态
    enableLoading: {
      type: Boolean,
      value: true
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    // 处理后的头像数据
    avatarData: {},
    // 加载状态
    loading: false,
    // 错误状态
    error: false,
    // 错误信息
    errorMessage: '',
    // 动态计算的尺寸相关数据
    loadingSize: '20px',
    errorIconSize: '24px',
    interactiveIconSize: '16px'
  },

  /**
   * 组件生命周期
   */
  lifetimes: {
    attached() {
      this.initializeAvatar();
    },
    
    ready() {
      this.updateSizeDependentData();
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 初始化头像数据
     */
    initializeAvatar() {
      if (this.properties.enableLoading) {
        this.setData({ loading: true });
      }
      
      try {
        this.processAvatarConfig();
        
        // 模拟加载延迟（实际使用中可能需要加载图片资源）
        if (this.properties.enableLoading) {
          setTimeout(() => {
            this.setData({ loading: false });
          }, 300);
        }
      } catch (error) {
        console.error('Failed to initialize avatar:', error);
        this.handleError('头像初始化失败');
      }
    },

    /**
     * 处理头像配置数据
     */
    processAvatarConfig() {
      let avatarConfig = this.properties.avatarConfig;
      
      // 如果没有配置数据，使用默认配置
      if (!avatarConfig || Object.keys(avatarConfig).length === 0) {
        avatarConfig = DEFAULT_AVATAR_CONFIG;
      }
      
      // 创建 AvatarConfig 实例进行验证
      const avatarInstance = new AvatarConfig(avatarConfig);
      const validation = avatarInstance.validate();
      
      if (!validation.isValid) {
        console.warn('Invalid avatar configuration:', validation.errors);
        // 使用默认配置作为后备
        avatarConfig = DEFAULT_AVATAR_CONFIG;
      }
      
      // 设置处理后的头像数据
      this.setData({
        avatarData: avatarInstance.toJSON(),
        error: false,
        errorMessage: ''
      });
    },

    /**
     * 头像配置变化监听器
     */
    onAvatarConfigChange(newConfig, oldConfig) {
      if (JSON.stringify(newConfig) !== JSON.stringify(oldConfig)) {
        this.processAvatarConfig();
      }
    },

    /**
     * 尺寸变化监听器
     */
    onSizeChange(newSize, oldSize) {
      if (newSize !== oldSize) {
        this.updateSizeDependentData();
      }
    },

    /**
     * 更新尺寸相关的数据
     */
    updateSizeDependentData() {
      const size = this.properties.size;
      let loadingSize, errorIconSize, interactiveIconSize;
      
      switch (size) {
        case 'small':
          loadingSize = '16px';
          errorIconSize = '18px';
          interactiveIconSize = '12px';
          break;
        case 'medium':
          loadingSize = '20px';
          errorIconSize = '24px';
          interactiveIconSize = '16px';
          break;
        case 'large':
          loadingSize = '28px';
          errorIconSize = '32px';
          interactiveIconSize = '20px';
          break;
        case 'xlarge':
          loadingSize = '36px';
          errorIconSize = '40px';
          interactiveIconSize = '24px';
          break;
        default:
          loadingSize = '20px';
          errorIconSize = '24px';
          interactiveIconSize = '16px';
      }
      
      this.setData({
        loadingSize,
        errorIconSize,
        interactiveIconSize
      });
    },

    /**
     * 处理错误状态
     */
    handleError(message) {
      this.setData({
        loading: false,
        error: true,
        errorMessage: message
      });
      
      // 触发错误事件
      this.triggerEvent('avatarError', {
        message,
        avatarConfig: this.properties.avatarConfig
      });
    },

    /**
     * 重试加载头像
     */
    retryLoad() {
      this.setData({
        error: false,
        errorMessage: ''
      });
      this.initializeAvatar();
    },

    /**
     * 头像点击事件
     */
    onAvatarTap() {
      if (this.data.loading || this.data.error) {
        if (this.data.error) {
          this.retryLoad();
        }
        return;
      }
      
      if (this.properties.interactive) {
        this.triggerEvent('avatarTap', {
          avatarConfig: this.properties.avatarConfig,
          avatarData: this.data.avatarData
        });
      }
    },

    /**
     * 获取头像描述（用于无障碍访问）
     */
    getAvatarDescription() {
      if (this.data.avatarData && Object.keys(this.data.avatarData).length > 0) {
        const avatarInstance = new AvatarConfig(this.data.avatarData);
        return avatarInstance.getDescription();
      }
      return '虚拟头像';
    },

    /**
     * 导出头像配置
     */
    exportAvatarConfig() {
      return this.data.avatarData;
    },

    /**
     * 检查头像是否有效
     */
    isAvatarValid() {
      if (!this.data.avatarData || Object.keys(this.data.avatarData).length === 0) {
        return false;
      }
      
      const avatarInstance = new AvatarConfig(this.data.avatarData);
      return avatarInstance.validate().isValid;
    },

    /**
     * 更新头像配置的特定属性
     */
    updateAvatarProperty(property, value) {
      try {
        const currentConfig = new AvatarConfig(this.data.avatarData);
        const updatedConfig = currentConfig.updateProperty(property, value);
        
        this.setData({
          avatarData: updatedConfig.toJSON()
        });
        
        // 触发更新事件
        this.triggerEvent('avatarUpdate', {
          property,
          value,
          avatarConfig: updatedConfig.toJSON()
        });
        
        return true;
      } catch (error) {
        console.error('Failed to update avatar property:', error);
        this.handleError('头像更新失败');
        return false;
      }
    },

    /**
     * 重置头像为默认配置
     */
    resetToDefault() {
      this.setData({
        avatarData: DEFAULT_AVATAR_CONFIG
      });
      
      this.triggerEvent('avatarReset', {
        avatarConfig: DEFAULT_AVATAR_CONFIG
      });
    }
  }
})